@element: 'button';
@import (multiple) 'theme.less';

:host {
  display: inline-block;
  position: relative;
  outline: none;
  flex: none;
  box-sizing: border-box;

  margin: 0 0.25em 0 0;
  min-width: 20px;
  border: 1px solid @el_border_color;
  border-radius: @border_radius;

  font-weight: @font_weight;
  font-family: @page_font;
  line-height: @line_height;

  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;

  cursor: pointer;
  color: @text_color;
  background-image: linear-gradient(@bg_top_color, @bg_bottom_color);
}

.inner {
  box-sizing: border-box;
  height: 100%;

  padding: 0.4em 1.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: @border_radius;

  display: flex;
  justify-content: center;
  align-items: center;
}

:host(:hover) {
  background-image: linear-gradient(@bg_top_color + 10%, @bg_bottom_color + 10%);
  color: @text_color_hover;
}

:host([focused]) {
  border-color: @focus_color;
}

:host([pressed]) {
  color: @text_color - 50%;
  background: @bg_color - 20%;

  .inner {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

:host([unnavigable]) {
  border-color: @el_border_color;
}

:host([disabled]) {
  pointer-events: none;

  border-color: @el_border_color + 20%;
  background-image: linear-gradient(@bg_top_color - 10%, @bg_bottom_color - 10%);
  color: rgba(255, 255, 255, 0.25);
}

/*-------------------
        Size
--------------------*/

// NOTE: we need to explicit the height, otherwise button will be stretch in flex wrapper

:host(.mini) {
  font-size: @mini;
  height: 18px;
}

:host(.tiny) {
  font-size: @tiny;
  height: 22px;
}

:host(.small) {
  font-size: @small;
  height: 24px;
}

:host {
  font-size: @medium;
  height: 26px;
}

:host(.large) {
  font-size: @large;
  height: 29px;
}

:host(.big) {
  font-size: @big;
  height: 33px;
}

:host(.huge) {
  font-size: @huge;
  height: 36px;
}

:host(.massive) {
  font-size: @massive;
  height: 44px;
}

/*-------------------
  Colored
--------------------*/

.color(@clr, @text_color, @bg_color) {
  @bg_top_color: @bg_color + 10%;
  @bg_bottom_color: @bg_color - 10%;
  @text_color_hover: @text_color + 20%;

  :host(.@{clr}) {
    color: @text_color;
    background-image: linear-gradient(@bg_top_color, @bg_bottom_color);
  }
  :host(.@{clr}:hover) {
    background-image: linear-gradient(@bg_top_color + 10%, @bg_bottom_color + 10%);
    color: @text_color_hover;
  }
  :host(.@{clr}[pressed]) {
    color: @text_color - 50%;
    background: @bg_color - 20%;
  }
  :host(.@{clr}[disabled]) {
    background-image: linear-gradient(@bg_top_color - 10%, @bg_bottom_color - 10%);
    color: rgba(255, 255, 255, 0.25);
  }
}

.color(red, #ddd, @red);
.color(green, #fff, @green);
.color(blue, #fff, @blue);

/*-------------------
  Transparent
--------------------*/

:host(.transparent) {
  background: none;
  border: 0;

  .inner {
    border: 0;
    padding: 0.4em 0.6em;
  }
}
:host(.transparent:hover) {
  color: @text_color_hover;
  background: @bg_color + 10%;
}
:host(.transparent[focused]) {
  color: @text_color_hover;
}
:host(.transparent[pressed]) {
  color: @text_color - 50%;
  background: @bg_color - 20%;

  .inner {
    box-shadow: none;
  }
}
:host(.transparent[disabled]) {
  opacity: 0.25;
  background: none;
}

.transparent_color(@clr, @text_color) {
  @text_color_hover: @text_color + 50%;

  :host(.transparent.@{clr}) {
    color: @text_color;
  }
  :host(.transparent.@{clr}:hover) {
    color: @text_color_hover;
    background: @text_color - 50%;
  }
  :host(.transparent.@{clr}[focused]) {
    color: @text_color_hover;
  }
  :host(.transparent.@{clr}[pressed]) {
    color: @text_color - 50%;
    background: @text_color - 100%;
  }
  :host(.transparent.@{clr}[disabled]) {
    opacity: 0.25;
  }
}

.transparent_color(red, @red + 50%);
.transparent_color(green, @green + 50%);
.transparent_color(blue, @blue + 50%);
